<template>
  <div class="toolbar-simple">
    <div class="toolbar-content">
      <!-- Tabs 切换 Select -->
      <div class="toolbar-group toolbar-tabs-select">
        <ToolbarButton
          type="select"
          :model-value="activeTab"
          :options="tabsOptions"
          placeholder="选择标签"
          size="sm"
          select-width="80px"
          @change="handleTabChange"
        />
      </div>

      <!-- Home 标签页的组件 -->
      <template v-if="!activeTab || activeTab === 'home'">
        <div class="toolbar-group toolbar-group-with-divider">
          <Undo :hide-text="true" />
          <Redo :hide-text="true" />
        </div>
        <div class="toolbar-group toolbar-group-with-divider">
          <FormatBrush :hide-text="true" />
          <ClearFormat :hide-text="true" />
        </div>
        <div class="toolbar-group toolbar-group-with-divider">
          <FontFamily :hide-text="true" />
          <FontSize :hide-text="true" />
        </div>
        <div class="toolbar-group toolbar-group-with-divider">
          <Bold :hide-text="true" />
          <Italic :hide-text="true" />
          <Underline :hide-text="true" />
          <Strike :hide-text="true" />
        </div>
        <div class="toolbar-group toolbar-group-with-divider">
          <TextColor :hide-text="true" />
          <Highlight :hide-text="true" />
        </div>
        <div class="toolbar-group toolbar-group-with-divider">
          <BulletList :hide-text="true" />
          <OrderedList :hide-text="true" />
          <TaskList :hide-text="true" />
        </div>
        <div class="toolbar-group toolbar-group-with-divider">
          <AlignLeft :hide-text="true" />
          <AlignCenter :hide-text="true" />
          <AlignRight :hide-text="true" />
          <AlignJustify :hide-text="true" />
        </div>
        <div class="toolbar-group toolbar-group-with-divider">
          <IndentDecrease :hide-text="true" />
          <IndentIncrease :hide-text="true" />
        </div>
        <div class="toolbar-group toolbar-group-with-divider">
          <Heading :hide-text="true" />
        </div>
      </template>

      <!-- Insert 标签页的组件 -->
      <template v-if="activeTab === 'insert'">
        <div class="toolbar-group toolbar-group-with-divider">
          <Image :hide-text="false" />
          <Link :hide-text="false" />
          <HorizontalRule :hide-text="false" />
          <PageBreak :hide-text="false" />
          <CodeBlock :hide-text="false" />
          <Blockquote :hide-text="false" />
          <Code :hide-text="false" />
        </div>
        <div class="toolbar-group toolbar-group-with-divider">
          <Comment :hide-text="false" />
        </div>
        <div class="toolbar-group toolbar-group-with-divider">
          <TableOfContents :hide-text="false" />
        </div>
        <div class="toolbar-group toolbar-group-with-divider">
          <ImportWord :hide-text="false" />
          <ExportWord :hide-text="false" />
        </div>
      </template>

      <!-- Table 标签页的组件 -->
      <template v-if="activeTab === 'table'">
        <div class="toolbar-group toolbar-group-with-divider">
          <InsertTable :hide-text="false" />
          <AddRowBefore :hide-text="false" />
          <AddRowAfter :hide-text="false" />
          <DeleteRow :hide-text="false" />
          <AddColumnBefore :hide-text="false" />
          <AddColumnAfter :hide-text="false" />
          <DeleteColumn :hide-text="false" />
          <DeleteTable :hide-text="false" />
          <MergeCells :hide-text="false" />
          <SplitCells :hide-text="false" />
          <CellBackgroundColor :hide-text="false" />
          <CellTextColor :hide-text="false" />
          <CellAlign :hide-text="false" />
        </div>
      </template>

      <!-- Page 标签页的组件 -->
      <template v-if="activeTab === 'page'">
        <div class="toolbar-group toolbar-group-with-divider">
          <PageBreak :hide-text="false" />
          <PageMargin :hide-text="false" />
          <PageSize :hide-text="false" />
          <PageOrientation :hide-text="false" />
          <PageBackground :hide-text="false" />
          <PageWatermark :hide-text="false" />
        </div>
      </template>

      <!-- 模式切换按钮 -->
      <div class="toolbar-group toolbar-mode-switcher">
        <ModeSwitcher
          :current-mode="currentMode"
          @mode-change="handleModeChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import ModeSwitcher from "../components/ModeSwitcher.vue";
import ToolbarButton from "../../../button/index.vue";
import type { SelectOption } from "../../../button/src/select/types";
import { TOOLBAR_TABS } from "../../../../config/constants";

// 导入所有工具栏组件
import Undo from "../../../menus/toolbar/base/Undo.vue";
import Redo from "../../../menus/toolbar/base/Redo.vue";
import FormatBrush from "../../../menus/toolbar/base/FormatBrush.vue";
import ClearFormat from "../../../menus/toolbar/base/ClearFormat.vue";
import FontFamily from "../../../menus/toolbar/base/FontFamily.vue";
import FontSize from "../../../menus/toolbar/base/FontSize.vue";
import Bold from "../../../menus/toolbar/base/Bold.vue";
import Italic from "../../../menus/toolbar/base/Italic.vue";
import Underline from "../../../menus/toolbar/base/Underline.vue";
import Strike from "../../../menus/toolbar/base/Strike.vue";
import TextColor from "../../../menus/toolbar/base/TextColor.vue";
import Highlight from "../../../menus/toolbar/base/Highlight.vue";
import BulletList from "../../../menus/toolbar/base/BulletList.vue";
import OrderedList from "../../../menus/toolbar/base/OrderedList.vue";
import TaskList from "../../../menus/toolbar/base/TaskList.vue";
import IndentIncrease from "../../../menus/toolbar/base/IndentIncrease.vue";
import IndentDecrease from "../../../menus/toolbar/base/IndentDecrease.vue";
import AlignLeft from "../../../menus/toolbar/base/AlignLeft.vue";
import AlignCenter from "../../../menus/toolbar/base/AlignCenter.vue";
import AlignRight from "../../../menus/toolbar/base/AlignRight.vue";
import AlignJustify from "../../../menus/toolbar/base/AlignJustify.vue";
import Heading from "../../../menus/toolbar/base/Heading.vue";
import Image from "../../../menus/toolbar/base/Image.vue";
import Link from "../../../menus/toolbar/base/Link.vue";
import HorizontalRule from "../../../menus/toolbar/base/HorizontalRule.vue";
import CodeBlock from "../../../menus/toolbar/base/CodeBlock.vue";
import Blockquote from "../../../menus/toolbar/base/Blockquote.vue";
import Code from "../../../menus/toolbar/base/Code.vue";
import ImportWord from "../../../menus/toolbar/base/ImportWord.vue";
import ExportWord from "../../../menus/toolbar/base/ExportWord.vue";
import PageBreak from "../../../menus/toolbar/page/PageBreak.vue";
import PageMargin from "../../../menus/toolbar/page/PageMargin.vue";
import PageSize from "../../../menus/toolbar/page/PageSize.vue";
import PageOrientation from "../../../menus/toolbar/page/PageOrientation.vue";
import PageBackground from "../../../menus/toolbar/page/PageBackground.vue";
import PageWatermark from "../../../menus/toolbar/page/PageWatermark.vue";
import InsertTable from "../../../menus/toolbar/table/InsertTable.vue";
import AddRowBefore from "../../../menus/toolbar/table/AddRowBefore.vue";
import AddRowAfter from "../../../menus/toolbar/table/AddRowAfter.vue";
import DeleteRow from "../../../menus/toolbar/table/DeleteRow.vue";
import AddColumnBefore from "../../../menus/toolbar/table/AddColumnBefore.vue";
import AddColumnAfter from "../../../menus/toolbar/table/AddColumnAfter.vue";
import DeleteColumn from "../../../menus/toolbar/table/DeleteColumn.vue";
import DeleteTable from "../../../menus/toolbar/table/DeleteTable.vue";
import MergeCells from "../../../menus/toolbar/table/MergeCells.vue";
import SplitCells from "../../../menus/toolbar/table/SplitCells.vue";
import CellBackgroundColor from "../../../menus/toolbar/table/CellBackgroundColor.vue";
import CellTextColor from "../../../menus/toolbar/table/CellTextColor.vue";
import CellAlign from "../../../menus/toolbar/table/CellAlign.vue";
import Comment from "../../../menus/toolbar/base/Comment.vue";
import TableOfContents from "../../../menus/toolbar/reference/TableOfContents.vue";

defineOptions({
  name: "SimpleToolbar",
});

const props = defineProps<{
  currentMode: "simple" | "ribbon";
  activeTab?: string;
}>();

const emit = defineEmits<{
  (e: "mode-change", mode: "simple" | "ribbon"): void;
  (e: "tab-change", tabId: string): void;
}>();

// 当前模式
const currentMode = computed(() => props.currentMode);

// 处理模式切换
const handleModeChange = (mode: "simple" | "ribbon") => {
  emit("mode-change", mode);
};

// 标签页选项（从配置中获取）
const tabsOptions: SelectOption[] = TOOLBAR_TABS.map(tab => ({
  label: tab.label,
  value: tab.name,
  disabled: tab.disabled,
}));

// 当前激活的标签页
const activeTab = ref<string>(props.activeTab || "");

// 处理标签页切换
const handleTabChange = (value: string) => {
  activeTab.value = value;
  emit("tab-change", value);
};

// 监听 props.activeTab 的变化
watch(
  () => props.activeTab,
  (newTab) => {
    if (newTab) {
      activeTab.value = newTab;
    }
  },
  { immediate: true }
);
</script>

<style scoped>
.toolbar-simple {
  background: var(--editor-color-white);
  border-bottom: 1px solid var(--editor-border-color);
  padding: 6px 12px;
  box-shadow: var(--editor-shadow);
}

.toolbar-content {
  display: flex;
  align-items: center;
  gap: 0px;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 0px;
  padding: 0 8px; /* 增加左右内边距 */
  margin: 0px;
  position: relative; /* 用于分割线定位 */
}

.toolbar-group-with-divider::after {
  content: "";
  position: absolute;
  right: 0; /* 分割线位于右侧 padding 边缘 */
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: var(--editor-border-color);
}

.toolbar-tabs-select {
  margin-right: 4px;
}

.toolbar-mode-switcher {
  margin-left: auto;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .toolbar-content {
    gap: 0px;
  }

  .toolbar-divider {
    margin: 0 4px;
  }
}

@media (max-width: 768px) {
  .toolbar-simple {
    padding: 4px 8px;
  }

  .toolbar-divider {
    margin: 0 2px;
    height: 14px;
  }
}

@media (max-width: 480px) {
  .toolbar-simple {
    padding: 2px 4px;
  }

  .toolbar-divider {
    margin: 0 1px;
    height: 12px;
  }
}
</style>
